<template>
    <div class="main">
         <!-- <h1> Main组件 </h1> -->
        <!-- 底部选项卡 -->
         <van-tabbar v-model="tabbarIndex" active-color ="#2a2a2a" inactive-color="#aeaeae" route>
     
            <!-- <van-tabbar-item badge="3"> -->
              <!-- 组件内部会把变量抛给组件的 -->
                <van-tabbar-item v-for="(item,index) in tabbarDatatwo" :key="index" :to="{name: item.name}" :dot="item.dot" > 
                    <span>{{item.title}}</span>
                    <!-- 插槽作用域 它就是个对象 -->
                    <template #icon="a">
                    <img :src="a.active ? item.activeIcon : item.inactiveIcon" />
                    </template>
                </van-tabbar-item>




        <!-- <van-tabbar-item icon="search">标签</van-tabbar-item> -->
        <!-- <van-tabbar-item icon="setting-o">标签</van-tabbar-item> -->
        </van-tabbar>

       
         <div >
          <!-- Main组件的二级路由插座 -->
          <router-view></router-view>
          

        </div>
         <!-- <Tabbar :tabbar-data = "tabbarData"> </Tabbar> -->

         <van-tabbar v-model="active" active-color="#ffc533" inactive-color="#000" active-dot= "true"   >
            <van-tabbar-item :to="{name :item.name}" :name="item.name" :icon="item.icon" v-for="(item,index) in tabbarData" :key=index  >{{item.title}}</van-tabbar-item>
          
        </van-tabbar>

    </div>
</template>

<script>

    //导入Tabbar.vue文件
    // import Tabbar from '../components/Tabbar.vue'

    export default {
        name:"Main",

        // components:{
        //     Tabbar
        // },
        
    //    main路由名称 ,你要接受 把路由名称发过来直接跳转
        data(){
           return {
            productDataact:[],
       
             tabIndex:0, 

            active:"Home",
            
            tabbarData:[
                {
                    title:"首页",
                    icon:"wap-home-o",
                    name:"Home",
                },
                {
                    title:"课堂",
                    icon:"tv-o",
                    name:"Tuijian",
                },
                {
                    title:"商城",
                    icon:"bag-o",
                    name:"Find" ,
                },
                {
                    title:"收藏夹",
                    icon:"passed",
                    name:"Shopcart",
                },
                {
                    title:"我的",
                    icon:"user-circle-o",
                    name:"My",
                },
            ],

            // tabbarData:[
            //     {title:"首页",name:"Home",routeNames:["Attention","Recommend","Note","Video","Activity", "MotherAndbaby", "Kitchen","Bake","Solarterms"]},
            //     {title:"分类",name:"Tuijian", routeNames:["Tuijian","Shouji"]},
            //     {title:"发现",name:"Find" ,routeNames:["Find"]},
            //     {title:"购物车",name:"Shopcart", routeNames:["Shopcart"]},
            //     {title:"我的",name:"My",routeNames:["My"]},
            // ],
            //激活选项卡的下标
              tabbarIndex:0,

              //底部选项卡的一些数据
            tabbarDatatwo:[
                {
                    title:"首页",
                    //一般有两个激活的图标和没有激活的图标
                    name:"Home",
                    activeIcon:require( "../assets/imgs/刷新.jpg"),
                    inactiveIcon:require( "../assets/imgs/刷新.jpg"),
                    dots:true,
                    dot:false,
                },
                {
                    title:"课堂",
                   name:"Tuijian",
                    //一般有两个激活的图标和没有激活的图标
                    activeIcon:require("../assets/imgs/OIP-C (2)视频.jpg"),
                    inactiveIcon:require("../assets/imgs/OIP-C (2)视频.jpg"),
                    dots:false,
                    dot:true,
                },
                {
                   name:"Find",
                    title:"商城",
                    //一般有两个激活的图标和没有激活的图标
                    activeIcon:require("../assets/imgs/购物袋.jpg"),
                    inactiveIcon:require("../assets/imgs/购物袋.jpg"),
                    dots:false,
                    dot:true,
                },
                {
                 name:"Shopcart",
                    title:"收藏夹",
                    //一般有两个激活的图标和没有激活的图标
                    activeIcon:require( "../assets/imgs/OIP-C (2)星星.jpg"),
                    inactiveIcon:require( "../assets/imgs/OIP-C (2)星星.jpg"),
                    dots:false,
                    dot:true,
                },
                {
                   name:"My", 
                    title:"我的",
                    //一般有两个激活的图标和没有激活的图标
                    activeIcon:require( "../assets/imgs/OIP-C (2)我的.jpg"),
                    inactiveIcon:require( "../assets/imgs/OIP-C (2)我的.jpg"),
                    dots:false,
                    dot:true,
                },

            ]
              

           };
        },

        created(){
        this.GetRecommend();
         // this.orderData
        },

        methods: {

          
    GetRecommend(){
        this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/init.json",
        //get请求参数写在params中
     
      })
        .then((result) => {
        //   console.log("result==>", result);
          if (result) {
            
          }
          this.productDataact = result.data.result.notes;
        //   this.productDataaend = result.data.data;
        //   console.log(" this.productDataact==>", this.productDataact);
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

        });
    },


          toggleTabbar(name){
            
            this.$router.push({ name })
          }  
        },
        
    }
</script>

<style lang="less" scoped>

</style>